import React, { useState, useEffect } from 'react';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import '../CoachList/CoachList.css'
import axios from '../../../utils/myAixos.js'
import { useNavigate } from 'react-router-dom'
import { Input, Button, Table, Dropdown, Select, Space, Form, Popconfirm, message } from 'antd';

const CoachList = () => {
    //跳转
    const navigate = useNavigate()
    // 编辑
    const Edit = (row) => {
        console.log('确定编辑按钮', row.c_id)
        navigate('/HomePage/EidtCoach', {
            state: {
                id: row.c_id,
                c_name: row.c_name,
                c_phone: row.c_phone
            }
        })
    }
    //查看
    const Chakan = (row) => {
        console.log('确定编辑按钮', row.c_id)
        navigate('/HomePage/ChakanCoach', {
            state: {
                id: row.c_id,
                c_name: row.c_name,
                c_sex: row.c_sex,
                c_phone: row.c_phone,
                c_venue: row.c_venue,
                c_status: row.c_status,
                c_src: row.c_src

            }
        })
        // navigate('/HomePage/ChakanCoach')}
    }
    //添加
    const Add = () => {
        console.log('添加')
        navigate('/HomePage/AddCoach')
    }

    //表格
    const columns = [
        {
            title: '姓名',
            key:'1',
            dataIndex: 'c_name',
            align: 'center',
        },
        {
            title: '性别',
            dataIndex: 'c_sex',
            key:'2',
            align: 'center',
        },
        {
            title: '手机号',
            dataIndex: 'c_phone',
            key:'3',
            align: 'center',

        },
        {
            title: '所属场馆 ',
            dataIndex: 'c_venue',
            key:'4',
            align: 'center',

        },
        {
            title: '状态 ',
            dataIndex: 'c_status',
            key:'5',
            align: 'center',

        },
        {
            title: '操作',
            dataIndex: 'm_caozuo',
            key:'6',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <a type="primary" onClick={() => Chakan(record)}>查看</a>
                    {/* onClick={() => navigate('/HomePage/AddCoach')} */}
                    <a type="primary" onClick={() => Edit(record)}  >编辑</a>
                    <Popconfirm
                        title="Delete the task"
                        description="确定删除吗？"
                        onConfirm={() => confirmDel(record)}
                        onCancel={cancelDel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a type="primary" htmlType="submit" onFinish={confirmDel}>删除</a>
                        {/* <Button type={"dashed"}>删除</Button> */}
                    </Popconfirm>

                </Space>
            ),
        },

    ];

    const [dataList, setDataList] = useState([]); //表格数据
    //获取会员数据
    const getStu = () => {
        axios({
            url: '/getCoachData',
            method: 'post'
        }).then(res => {
            console.log('获取所有会员数据1', res.data.data)
            console.log(res.status)
            if (res.status === 200) {
                setDataList(res.data.data)
            }
        }).catch(err => {
            console.log('获取所有会员数据2', err)
        })
    }
    //1、获取到所有会员的数据
    useEffect(() => {
        getStu()
    }, [])
    //下拉框
    const handleButtonClick = (e) => {
        message.info('Click on left button.');
        console.log('click left button', e);
    };
    const handleMenuClick = (e) => {
        message.info('Click on menu item.');
        console.log('click', e);
    };
    const items = [
        {
            label: '正常',
            key: '1',
        },
        {
            label: '已停用',
            key: '2',
        },
        {
            label: '已失效',
            key: '3',
        },
        {
            label: '暂停中',
            key: '4',
        },
    ];
    const menuProps = {
        items,
        onClick: handleMenuClick,
    };
    //点击查询
    const search = (params) => {
        console.log("search1111");
        console.log('7777', params)
        axios({
            url: '/coachSearch',
            method: 'post',
            data: params
        }).then(res => {
            console.log('查询教练结果成功', res.data.status)
            if (res.data.status === 200) {
                //获取成功
                // res.data
                setDataList(res.data.data)
                message.success('查询成功')
            } else {
                message.error('查询成功')
            }
        }).catch(err => {
            console.log('查询教练结果错误', err)
        })
    }
    //确定删除
    const confirmDel = (row) => {
        console.log('确定删除按钮', row)
        //发请求
        axios({
            url: '/coachDel',
            method: 'post',
            data: {
                c_id: row.c_id
            }
        }).then(res => {
            console.log('删除学生数据', res)
            if (res.code === 200) {
                message.success("删除成功")
                getStu()
            } else {
                getStu()
            }
        }).catch(err => {
            console.log('删除学生数据', err)
        })
    }
    const cancelDel = () => {

    }
    return (
        <div class="boxCoachList">
            {/* 按钮栏 */}
            <div class="boxcoach">
                <Form
                    name="horizontal_login"
                    layout="inline"
                    onFinish={search}
                >
                    <Form.Item
                        name="c_name"
                    >
                        <Input placeholder="教练姓名" />
                    </Form.Item>

                    <Form.Item
                        name="c_venue"
                    >
                        <Select
                            defaultValue="请选择场馆"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '大都会健身馆',
                                    label: '大都会健身馆',
                                },
                                {
                                    value: '商场2楼',
                                    label: '商场2楼',
                                },

                            ]}
                        />

                    </Form.Item>
                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>
                    <Form.Item

                    >
                        <Button onClick={() => Add()} >添加教练</Button>
                    </Form.Item>
                </Form>
            </div>
            {/* 表单 */}
            <div class="bodyCoachList">
                <Table rowKey={record => record.c_id} columns={columns} dataSource={dataList} />
            </div>

        </div>
    )
}
export default CoachList